<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猫叔的测试站 - 关于我们</title>
    <link rel="stylesheet" href="./css/all.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/about.css">
</head>
<body>
    <header>
        <div class="container">
            
            <div class="logo">
                
                <img src="img/logo_white.png" alt="">
            </div>
         
            <ul>
                <li><a href="./index.html" taget="_self">首页</a></li>
                <li><a href="./case.html" taget="_self">最新案例</a></li>
                <li class="actived"><a href="./about.html" taget="_self">关于我们</a></li>
                <li><a href="./contact.html" taget="_self">联系我们</a></li>
            </ul>
            <div class="clear"></div>
            
        </div>
    </header>
    <!-- <div id="header"></div> -->
    <div class="banner">
        <div class="main-text">
            <h1>
                独具匠心 专注品质
            </h1>
            <span>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, cumque obcaecati? Ad molestias, iusto, explicabo quasi est placeat tempore atque architecto fuga adipisci qui vel natus quod dicta provident dolorum.
            </span>
        </div>
    </div>


    <div class="container lists">
        <div class="title">
            关于我们
        </div>
        <div class="pic-lists">
            <div class="pic-list">
                <div class="img">

                    <img src="img/a1.jpg" alt="">
                </div>
                <div class="picinfo">
                    <div class="pic-title">
                        自由创意
                    </div>
                    <div class="pic-desc">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum eligendi necessitatibus ipsa qui libero! Repellendus labore ab adipisci quae harum sed! Incidunt eum ea saepe sequi adipisci dolores ut accusamus dolor, nostrum necessitatibus obcaecati nulla aliquid deleniti laudantium autem? Repellendus repellat adipisci nobis officia ipsa esse recusandae animi cupiditate magnam. Iste perferendis tempore libero doloremque vero! Eos id nemo vel facere repellendus blanditiis laudantium dicta praesentium natus illum sit labore unde, corporis possimus sint maiores consequatur vero dignissimos voluptate aliquam?
                    </div>
                </div>
                <div class="clear"></div>
                
            </div>

            <div class="pic-list">
                <div class="img">

                    <img src="img/a2.jpg" alt="">
                </div>
                <div class="picinfo">
                    <div class="pic-title">
                        自由创意
                    </div>
                    <div class="pic-desc">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum eligendi necessitatibus ipsa qui libero! Repellendus labore ab adipisci quae harum sed! Incidunt eum ea saepe sequi adipisci dolores ut accusamus dolor, nostrum necessitatibus obcaecati nulla aliquid deleniti laudantium autem? Repellendus repellat adipisci nobis officia ipsa esse recusandae animi cupiditate magnam. Iste perferendis tempore libero doloremque vero! Eos id nemo vel facere repellendus blanditiis laudantium dicta praesentium natus illum sit labore unde, corporis possimus sint maiores consequatur vero dignissimos voluptate aliquam?
                    </div>
                </div>

                <div class="clear"></div>
                
                
            </div>

            <div class="pic-list">
                <div class="img">

                    <img src="img/a3.jpg" alt="">
                </div>
                <div class="picinfo">
                    <div class="pic-title">
                        自由创意
                    </div>
                    <div class="pic-desc">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum eligendi necessitatibus ipsa qui libero! Repellendus labore ab adipisci quae harum sed! Incidunt eum ea saepe sequi adipisci dolores ut accusamus dolor, nostrum necessitatibus obcaecati nulla aliquid deleniti laudantium autem? Repellendus repellat adipisci nobis officia ipsa esse recusandae animi cupiditate magnam. Iste perferendis tempore libero doloremque vero! Eos id nemo vel facere repellendus blanditiis laudantium dicta praesentium natus illum sit labore unde, corporis possimus sint maiores consequatur vero dignissimos voluptate aliquam?
                    </div>
                </div>
                <div class="clear"></div>
                
                
            </div>

            
        </div>
    </div>

    <div class="concat">
        <div class="container">

            <div class="title">
                联系我们
            </div>
            <div>
                <!-- 二维码 -->
                <div class="qrcode">
                    <img src="img/qrcode.jpg" alt="公众号二维码" width="120">
                    <div class="center">
                        关注公众号
                    </div>
                </div>
                <div class="qrcode">
                    <img src="img/qrcode.jpg" alt="App二维码" width="120">
                    <div class="center">
                        下载app
                    </div>
                </div>
                <div class="info-box">
                    <div class="line">
                        <span class="title-small">
                            QQ:
                        </span>
                        <span class="info">
                            2222xxxx22
                        </span>
                    </div>

                    <div class="line">
                        <span class="title-small">
                            邮箱:
                        </span>
                        <span class="info">
                            xxxx@qq.com
                        </span>
                    </div>

                    <div class="line">
                        <span class="title-small">
                            微博:
                        </span>
                        <span class="info">
                            xxxx
                        </span>
                    </div>

                    <div class="line">
                        <span class="title-small">
                          地址:
                        </span>
                        <span class="info">
                            山东省青岛市xx区xx路2号
                        </span>
                    </div>
                </div>

                <div class="phone">
                    <i class="fas fa-phone-alt fa-3x" ></i>
                    <span>
                        0537-88xxxxx88
                    </span>
                </div>

                <div class="clear"></div>
            </div>
        </div>
    </div>

    <footer class="center">
        Copyright &copy; 2024 XXXXXXXX公司版权所有
    </footer>
</body>
</html>